<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SignalR Chat</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.10/signalr.min.js"></script>
    <script>
        function messageReceived(object) {
            //debugger
            // 处理接收到的消息，例如将其添加到聊天窗口
            console.log("Received message from " + object.username + ": " + object.message);
            // 实际的UI更新代码将在这里
            // 创建一个新的消息元素
            var messageEntry = document.createElement("div");
            messageEntry.textContent = object.username + ": " + object.message;

            // 将新消息添加到聊天窗口
            var messagesContainer = document.getElementById("messages");
            messagesContainer.appendChild(messageEntry);

            // 也可以让聊天窗口滚动到最新的消息
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        function ForceOffline(msg) {
            console.log("收到消息", msg);
        }

        // 定义一个客户端类来处理与Hub的通信
        var connection = new signalR.HubConnectionBuilder()
            .withUrl("wss://malusapi.dotnetshare.com/hub?token=9b1bce5610314678ab22008a86d26e09") // 将"/yourHubUrl"替换为你的SignalR Hub的URL
            .configureLogging(signalR.LogLevel.Information) // 可以设置日志级别
            .build();

        // 处理连接打开事件 
        //定义一个方法，共后端调用
        connection.on("ReceiveMessage", messageReceived);

        connection.on("ForceOffline", ForceOffline);

        // 连接到Hub
        connection.start().catch(function (err) {
            console.error(err.toString());
        });

        // 设置重连事件处理器
        connection.onreconnecting(function (error) {
            // 通知用户连接正在尝试重新建立
            console.error("Connection lost, trying to reconnect...");
        });

        connection.onreconnected(function (connection) {
            // 通知用户连接已经成功重新建立
            console.log("Reconnected to the hub: " + connection.connectionId);
        });

        // 连接到Hub，并添加错误处理
        connection.start().catch(function (err) {
            console.error(err.toString());
        });

        // 发送消息到Hub的函数
        function sendMessage() {
            var user = document.getElementById('userInput').value;
            var message = document.getElementById('messageInput').value;
            // 调用后端的方法
            connection.invoke("SendMessage", user, message).catch(function (err) {
                return console.error(err.toString());
            });
        }
    </script>
</head>
<body>
<h1>SignalR Chat</h1>
<input id="userInput" placeholder="Your name" type="text"/>
<input id="messageInput" placeholder="Type a message" type="text"/>
<button onclick="sendMessage()">Send</button>

<div id="messages"></div>
</body>
</html>